{include file="common/head" /}
<style>
    .value {
        margin: 10px 0 0 55px;
    }

    .image .imgs {

    }

    .image img {
        height: 36px;
    }

    .del {
        left: 108px;
        cursor: pointer;
        position: absolute;
        margin-top: -6px;
    }
</style>
<div class="layui-container">
    <div class="layui-row">
        <form class="layui-form layui-form-pane " action="">
            <div class="layui-form-item">
                <label class="layui-form-label">配置名</label>
                <div class="layui-input-block">
                    <input type="text" name="name"  lay-verify="required" placeholder="请输入配置名"
                           autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">分类</label>
                <div class="layui-input-block layui-form inputSelect">
                    <select name="type" lay-verify="required">
                        <option value=""></option>
                        <option value="0">北京</option>
                        <option value="0">北京2</option>
                        <option value="1">上海</option>
                        <option value="2">广州</option>
                        <option value="3">深圳</option>
                        <option value="4">杭州</option>
                    </select>
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">类型</label>
                <div class="layui-input-block">
                    <select name="type" lay-verify="required" lay-filter="select-type">
                        <option value="">请选择类型</option>
                        <option value="text">text</option>
                        <option value="json">json</option>
                    </select>
                </div>
            </div>

            <div class="type">

            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="status" lay-skin="switch" lay-text="开启|关闭" checked>
                </div>
            </div>

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">描述</label>
                <div class="layui-input-block">
                    <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
    //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
    layui.config({
        base: '/static/common/expand/layui/mod/'
    }).extend({
        inputSelect: 'inputSelect/inputSelect'
    }).use(['form', 'inputSelect', 'jquery', 'upload'], function () {
            var $ = layui.jquery,
                form = layui.form,
                upload = layui.upload,
                inputSelect = layui.inputSelect;

            var n = 0;
            //类型选择
            form.on('select(select-type)', function (data) {
                var h = '<div class="layui-form-item">' +
                    '        <label class="layui-form-label">配置值</label>' +
                    '             <div class="layui-input-block">' +
                    '                  <input type="text" name="value" required lay-verify="required" placeholder="请输入配置值" autocomplete="off" class="layui-input">' +
                    '             </div>' +
                    '    </div>',
                    l = '<div class="layui-form-item">' +
                        '     <label class="layui-form-label">配置值</label>' +
                        '     <div class="layui-input-inline">' +
                        '          <select>' +
                        '               <option value="key-value" selected>key-value</option>' +
                        '               <option value="image">image</option>' +
                        '          </select>' +
                        '     </div>' +
                        '     <button type="button" class="layui-btn layui-btn-normal add" style="margin-left: -10px">添加</button>' +
                        '     <div class="value"></div>' +
                        '</div>',
                    o = $(data.othis).parent('div').parent('div').next('.type');
                data.value == 'text' ? o.html(h) : (o.html(l), form.render('select'));
            });

            //配置值添加
            $('body').on('click', '.add', function () {
                var o = $(this), r = new RegExp('_n_', "g"), v = o.prev('div').find('select').val(),
                    i = '<div class="layui-form-item value key-value">' +
                        '     <i class="layui-icon layui-icon-close-fill del"></i>' +
                        '     <input type="hidden" name="value[_n_]type" value="text"/>' +
                        '     <div class="layui-input-inline">' +
                        '          <input type="text" name="value[_n_]name" class="layui-input row-input" required lay-verify="required" placeholder="键">' +
                        '     </div>' +
                        '     <div class="layui-input-inline">' +
                        '          <input type="text" name="value[_n_]value" class="layui-input" required lay-verify="required" placeholder="值">' +
                        '     </div>' +
                        '</div>',
                    j = '<div class="layui-form-item value image">' +
                        '     <i class="layui-icon layui-icon-close-fill del"></i>' +
                        '     <input type="hidden" name="value[_n_]type" value="image"/>' +
                        '     <div class="layui-input-inline">' +
                        '          <input type="text" name="value[_n_]name" class="layui-input row-input" required lay-verify="required" placeholder="键">' +
                        '     </div>' +
                        '     <div class="layui-input-inline">' +
                        '          <button type="button" class="layui-btn" id="upload_n_">' +
                        '                     <i class="layui-icon">&#xe67c;</i>上传图片' +
                        '          </button>' +
                        '          <span class="imgs">' +
                        '                <input type="hidden" name="value[_n_]value" value=""/>' +
                        '                <img src=""/>' +
                        '          </span>' +
                        '     </div>' +
                        '</div>';
                v == 'image' ? (o.next('.value').append(j.replace(r, n)), uploads(n)) : o.next('.value').append(i.replace(r, n));
                n++;
            });

            //删除配置
            $('body').on('click', '.del', function () {
                $(this).parent().remove();
            });

            function uploads(i) {
                var a = '#upload' + i, b = $(a), c = b.parent().find('.imgs');console.log(a);
                upload.render({
                    elem: a, //绑定元素
                    url: '{:url("Admin/uploads")}', //上传接口
                    before: function (obj) {
                        //预读本地文件示例，不支持ie8
                        obj.preview(function (index, file, result) {
                            c.find('img').attr('src', result), c.find('input').val('');
                        });
                    },
                    done: function (res) {
                        layer.msg(res.msg);
                        res.code == 200 ? c.find('input').val(res.path) : c.find('img').attr('src', '');
                    },
                    error: function () {
                        //请求异常回调
                        c.find('img').attr('src', '');
                    }
                });
            };

            function add(){

            }

            //监听提交
            form.on('submit(formDemo)', function (data) {
                console.log(data.field);
                layer.msg(JSON.stringify(data.field));
                return false;
            });
        }
    );
</script>
{include file="common/foot" /}